<template>
  <div class="article-detail-content">
    <h2>{{ article.title }}</h2>
    <p>作者：{{ article.author }}</p>
    <p>发布时间：{{ article.createTime }}</p>

    <!-- 加载中 -->
    <div v-if="!renderedContent && props.article.content === ''">
      正在加载文章内容...
    </div>

    <!-- 渲染 Markdown 内容 -->
    <div v-html="renderedContent" class="markdown-body"></div>
  </div>
</template>

<script setup>
import { defineProps, ref, watch } from 'vue'
import * as marked from 'marked'

// 接收父组件传入的文章数据
const props = defineProps({
  article: {
    type: Object,
    required: true,
    default: () => ({
      title: '',
      author: '',
      createTime: '',
      content: ''
    })
  }
})

const renderedContent = ref('')

// 监听 article.content 变化，重新渲染 Markdown
watch(
  () => props.article.content,
  (newContent) => {
    if (newContent) {
      renderedContent.value = marked.parse(newContent)
    }
  },
  { immediate: true } // 立即执行一次
)

// console.log('renderedContent:', renderedContent.value)
</script>

<style scoped>
 @import 'github-markdown-css';
.article-detail-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}
.markdown-body {
  margin-top: 20px;
  font-size: 16px;
}
</style>